import React, { useEffect, useState, useRef } from 'react';
import { Modal, Space, Button, Tabs, Form, Tree, Table } from 'dw-mx';
import { useSewTask } from 'dw-mx-sew';
import { request } from 'dw-mx-request';

export default function ProcessDetailInfo(props) {
    // 流程任务
    const sewTask = useSewTask();
    const processVars = sewTask.getProcessVars();

    const [treeData, setTreeData] = useState([]);

    useEffect(() => {
        initTreeData();
    }, []);

    const initTreeData = async () => {
        const result = await request('/mx/SEWEngine/getTaskList', { piid: processVars.getPiid() });
        // setTreeData(result.result_message.tasklist);
        setTreeData([
            {
                title: 'parent 1',
                key: '0-0',
                children: [
                    {
                        title: 'parent 1-0',
                        key: '0-0-0',
                        children: [
                            {
                                title: 'leaf',
                                key: '0-0-0-0',
                            },
                            {
                                title: 'leaf',
                                key: '0-0-0-1',
                            },
                            {
                                title: 'leaf',
                                key: '0-0-0-2',
                            },
                        ],
                    },
                    {
                        title: 'parent 1-1',
                        key: '0-0-1',
                        children: [
                            {
                                title: 'leaf',
                                key: '0-0-1-0',
                            },
                        ],
                    },
                    {
                        title: 'parent 1-2',
                        key: '0-0-2',
                        children: [
                            {
                                title: 'leaf',
                                key: '0-0-2-0',
                            },
                            {
                                title: 'leaf',
                                key: '0-0-2-1',
                            },
                        ],
                    },
                ],
            },
        ]);
    };

    const callback = async () => {};

    const columns = [
        {
            title: '活动',
            dataIndex: 'isrun',
        },
        {
            title: '任务名称',
            dataIndex: 'tname',
        },
        {
            title: '完成人',
            dataIndex: 'completename',
        },
        {
            title: '完成时间',
            dataIndex: 'tetime',
        },
    ];

    const tabPagination = {
        pageSize: 5,
        showQuickJumper: true,
    };

    const onSelect = () => {};

    return treeData ? (
        <>
            <div style={{ height: 550 }}>
                <div style={{ height: 500, width: 200 }}>
                    <Tree showLine defaultExpandedKeys={['0-0-0']} onSelect={onSelect} treeData={treeData} />
                </div>
                <div></div>
            </div>
        </>
    ) : (
        <div style={{ height: 550 }}>
            <div>Loading......</div>
        </div>
    );
}
